<template>
  <div class="banner">
    <GlobalHeader :showBorderBottom="false"></GlobalHeader>
    <!--    <video class="video-play" autoplay loop muted>-->
    <!--      <source src="/video/banner.mp4" type="video/mp4">-->
    <!--    </video>-->
    <!--    <el-image class="video-play" :src="userBanner"></el-image>-->
    <img class="video-play" :src="userBanner" alt="">
    <div class="img-mask"></div>
    <div class="person-info">
      <div class="avatar">
        <el-avatar :src="userInformation.userAvatar" :size="80"></el-avatar>
      </div>
      <div class="right">
        <div class="nick-name">{{ userInformation.nickname }}</div>
        <div class="personalized-signature" v-if="currentUserId === currentId" @click="showInput = true">
          <span v-if="showInput">
            <el-input v-model="signatureText" style="width: 240px" @blur="handleEditSignature"/>
          </span>
          <span v-else>{{ userInformation.personalSignature || "编辑个性签名" }}</span>
        </div>
        <div class="personalized-signature" v-else>
          {{ userInformation.personalSignature || "这个人什么也没留下" }}
        </div>
      </div>

    </div>
    <div class="main-content">
      <div class="nav-bar-main">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            router
            :ellipsis="false"
        >
          <el-menu-item :index="'/space/home/'+currentUserId">
            <Icon icon="bxs:home-heart" style="color: #2ae6ff" width="24" height="24"></Icon>
            主页
          </el-menu-item>
          <el-menu-item :index="'/space/dynamic/'+currentUserId">
            <img src="/img/icon/动态.svg" alt="" width="20px">
            动态
          </el-menu-item>
          <el-menu-item :index="'/space/submit/'+currentUserId">
            <el-icon>
              <Promotion/>
            </el-icon>
            投稿
          </el-menu-item>
          <el-menu-item ref="saveMenuItem" :index="'/space/save/'+currentUserId" v-if="saveVisible">
            <el-icon>
              <StarFilled/>
            </el-icon>
            收藏
          </el-menu-item>
          <el-menu-item index="/space/settings" v-if="currentUserId == currentId">
            <el-icon>
              <Setting/>
            </el-icon>
            设置
          </el-menu-item>
          <!--          <el-menu-item>-->
          <!--            <el-input v-model="keywords" style="width: 240px" placeholder="Please input" />-->
          <!--          </el-menu-item>-->
        </el-menu>
        <div class="statistic">
          <div class="item" @click="toCare">
            <div class="text">
              关注数
            </div>
            <div class="count">2</div>
          </div>
          <div class="item" @click="toFans">
            <div class="text">
              粉丝数
            </div>
            <div class="count">0</div>
          </div>

        </div>
      </div>

      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import GlobalHeader from "@/components/GlobalHeader.vue";
import {Icon} from '@iconify/vue';
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {editSignature, getAllById, getSaveVisible, getUserBanner} from "@/api/api.js";
import {useUserStore} from "@/stores/userInfoStore.js";
import emitter from "@/utils/emitter.js";
import {ElNotification} from "element-plus";

const keywords = ref('')

const route = useRoute();
const currentUserId = ref(String(route.params.userId)) // 当前被访问的用户id
const userInformation = ref({}) // 当前主页的用户信息
const currentId = ref() // 当前登录用户id


const activeIndex = ref(route.path);

const saveVisible = ref(true)
const saveMenuItem = ref()

const userBanner = ref('')
onMounted(async () => {
  emitter.on('changeRoute', (val) => {
    nextTick(() => {
      console.log(saveMenuItem.value)
      saveMenuItem.value.handleClick()
    })
  })

  // 获取登录用户id
  currentId.value = localStorage.getItem("userId")
  const bannerRes = await getUserBanner();
  console.log(bannerRes)
  userBanner.value = bannerRes.data.bannerImg

  // 获取当前跳转的用户id
  // 如果查看的不是自己的主页
  if (currentUserId.value !== currentId.value) {
    // 获取目标的收藏权限
    const res = await getSaveVisible(currentUserId.value)
    saveVisible.value = res.data

    const res1 = await getAllById(currentUserId.value);
    console.log(res1)
    userInformation.value = res1.data;
  } else { // 是本人跳转
    const res = await getAllById(currentUserId.value);
    console.log(res)
    userInformation.value = res.data;
  }
  if (currentId.value === currentUserId.value) {
    console.log("是本人访问")
    oldSignatureText.value = userInformation.value.personalSignature
    signatureText.value = oldSignatureText.value
  }
})

const router = useRouter()


onMounted(() => {
  emitter.emit("changeBgColor", {color: 'white', hasColor: false}) // 菜单字体颜色为白色,不显示背景颜色
})

onUnmounted(() => {
  // emitter.emit("changeBgColor",'black',true) // 菜单字体颜色为黑色,显示背景颜色为白色
  emitter.emit("changeBgColor", {color: 'black', hasColor: true}) // 菜单字体颜色为黑色,显示背景颜色为白色
})

/**
 * 编辑个性签名
 */
const showInput = ref(false)
const signatureText = ref('')
const oldSignatureText = ref('')
const handleEditSignature = async () => {
  // console.log(signatureText.value)
  // console.log(oldSignatureText.value)
  // console.log(signatureText.value === oldSignatureText.value)
  if (signatureText.value.length ===0 || signatureText.value === oldSignatureText.value){
    showInput.value = false
    return;
  }
    try {
      const res = await editSignature(signatureText.value);
      console.log(res)
      ElNotification.success(res.msg)
      userInformation.value.personalSignature = signatureText.value
      oldSignatureText.value = signatureText.value
    } catch (e) {
      ElNotification.error(res.msg)
    } finally {
      showInput.value = false
    }

}


const toCare = () => {
  router.push({
    name: 'care',
    params: {
      userId: currentUserId.value
    }
  })
}
const toFans = () => {
  router.push({
    name: 'fans',
    params: {
      userId: currentUserId.value
    }
  })
}

</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 200px;

  .video-play {
    width: 100%;
    position: relative;
    top: -60px;
    z-index: -100;
  }

  .img-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 160px;
    z-index: -10;
    //background-color: rgba(0, 0, 0, 0.6);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
  }

  .person-info {
    width: 1360px;
    margin: 0 auto;
    margin-top: -150px;
    display: flex;

    .avatar {
      width: 100px;
      padding: 10px;
    }

    .right {
      color: white;

      .nick-name {
        height: 40px;
        //color: red;
        font-size: 25px;
      }

      .personalized-signature {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        //color: gray;
      }
    }
  }

  .main-content {
    width: 1360px;
    margin: 0 auto;
    box-sizing: border-box;

    .nav-bar-main {
      display: flex;
      justify-content: space-between;

      .statistic {
        display: flex;
        font-size: 13px;

        .item {
          cursor: pointer;
          padding: 10px;
          text-align: center;

          .text {
            padding: 5px;
          }
        }
      }
    }

    .content-container {
      display: flex;

      .main {
        width: 1080px;
      }

      //.right-aside{
      //  width: 280px;
      //  background-color: #b61515;
      //  height: 200px;
      //}
    }

  }
}

</style>